<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>农产品溯源系统用户登录</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
  body, html {
    font-family: Arial, sans-serif;
    background: url('../static/img.png') no-repeat center center fixed; /* 使用静态资源路径 */
    background-size: cover;
    background-position: center;
    height: 100%;
    margin: 0;

  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
  }

  .header {
    text-align: center;
    font-size: 24px;
    color: #333; /* 绿色 */
    margin-bottom: 20px;
    width: 100%;
  }

  .coBodyItem {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    width: 100%;
    max-width: 300px;
    margin: auto; /* 居中 */
  }

  .formItem {
    margin-bottom: 15px;
  }

  .formItem label {
    display: block;
    margin-bottom: 5px;
    color: #666; /* 绿色 */
  }

  .formItem input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
  }

  .btnBox {
    text-align: center;
  }

  .btn {
    background-color: #28a745; /* 绿色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .btn:hover {
    background-color: #218838; /* 深一点的绿色 */
  }

  .btn:active {
    background-color: #1e7e34; /* 更深一点的绿色 */
  }

  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); /* 绿色焦点效果 */
  }

    </style>
</head>
<body>

<div class="content">
    <div class="coBodyItem">
        <div class="header">
            <div class="headerItem">农产品溯源系统用户登录</div>
        </div>

        <div class="formItem"><label>用户名:</label> <input id="loginUsername" name="loginUsername" placeholder="请输入用户名" required /></div>
        <div class="formItem"><label>密码:</label> <input id="loginPassword" name="loginPassword" type="password" placeholder="请输入密码" required /></div>
        <div class="btnBox">
            <button class="btn primary" onclick="handleLogin()">登录</button>
        </div>
    </div>
</div>

<script>
    function handleLogin() {
        var user = {
            username: $('#loginUsername').val(),
            password: $('#loginPassword').val()
        };

        $.ajax({
            url: 'http://localhost:8007/user/login',  // 后端接口地址，确保端口号是后端的实际端口
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(user),
            success: function(response) {
                if (response.status === 'success') {
                    alert('登录成功');
                    window.location.href = 'http://localhost:8007/index';  // 登录成功后跳转到首页
                } else {
                    alert('登录失败: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                alert('登录请求失败');
                console.error(error);
            }
        });
    }
</script>

</body>
</html>
